<template>
    <div>
        <van-nav-bar
        title="个人信息"
        left-arrow
        @click-left="onClickLeft"/>
        <ul>
            <li>
                <div class="img">
                    <span>头像</span>
                    <input
                    id="file"
                    accept="image/*"
                    @change="chooseImg"
                    type="file"
                    style="display: none"
                    />
                    <label for="file" class="iconfont">
                    <van-image
                        width="45px"
                        height="45px"
                        round
                        :src='userInfo.avatar'/>
                    </label>

                    <span>
                         <!-- <van-icon name="arrow" /> -->
                    </span>
                </div>
            </li>
            <li><van-field v-model='userInfo.nickname' label="昵称" right-icon="arrow"/></li>
            <li>
                <van-field
                readonly
                clickable
                label="性别"
                :value="userInfo.sex"
                @click="showPicker = true"
                
                />
                <van-popup v-model="showPicker" round position="bottom">
                <van-picker
                    show-toolbar
                    :columns="columns"
                    @cancel="showPicker = false"
                    @confirm="onConfirm1"
                />
                </van-popup>
            </li>
            <li>
                <van-cell title="生日" :value="userInfo.birthday" @click="show = true" />
                <van-calendar v-model="show" @confirm="onConfirm" />
            </li>
        </ul>
        <div style="margin: 16px">
      <van-button
        @click="getuser"
        round
        block
        type="info"
        native-type="submit"
        class="btn"
        >确定</van-button
      >
    </div>
    </div>
</template>

<script>
import { Field } from 'vant';
import { Image as VanImage } from 'vant';
import { Picker } from "vant";
import { Popup } from 'vant';
import { Cell, CellGroup } from 'vant';
import { Calendar } from 'vant';
export default {
    name: 'WorkspaceJsonUser',
    components:{
        [Field.name]:Field,
        [VanImage.name]:VanImage,
        [Calendar.name]: Calendar ,
        [Picker.name]: Picker,
        [Popup.name]: Popup,
        [CellGroup.name]: CellGroup,
        [Cell.name]: Cell,
    
    },
    data() {
        return {
            showPicker: false,
            columns: ['男','女'],
            show: false,
            userInfo:{}
        };
    },

    mounted() {
        
    },
    created(){
        this.gainuser()
    },
    methods: {
        onClickLeft(){
            this.$router.go(-1)
        },
        // 获取用户信息
        gainuser(){
            this.token=localStorage.getItem('token')
            // console.log(this.token);
            this.$http.post('/user/getuserInfo',{
                token:this.token
            })
            .then(res=>{
                console.log(res);
                this.$root.userInfo=res.userInfo
                this.userInfo=res.userInfo
                console.log(this.$root.userInfo.nickname);
            })
        },
        // 性别
        onConfirm1(value) {
            this.userInfo.sex = value;
            this.showPicker = false;
        },
        // 日期
        formatDate(date) {
            return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        },
        onConfirm(date) {
            this.show = false;
            this.userInfo.birthday = this.formatDate(date);
        },
        // 头像
        getUploadToken() {
            return this.$http.get(
                "https://d33a5037-6c63-4e92-8bb1-30018ab701ea.bspapp.com/http/upload/token"
            );
        },
     
        // 选择图片事件
        async chooseImg(e) {
        console.log();

        //  选择完就上传

        let file = e.target.files[0];
        console.log(file);
        //  先去申请一个token
        try {
            let { token } = await this.getUploadToken();

            console.log(token);

            //  file  token  和文件名 一起发给七牛云的服务器
            let exname = file.name.slice(file.name.lastIndexOf(".") + 1);
            let key = `${new Date().getTime()}_${Math.random()
            .toString(36)
            .slice(2)}.${exname}`;
            let formData = new FormData();

            formData.append("token", token);
            formData.append("file", file);
            formData.append("key", key);
            this.$http
            .post("https://upload-z1.qiniup.com", formData)
            .then((res) => {
                console.log(res);
                this.userInfo.avatar = `http://toutiao.longxiaokj.com/` + res.key;
                console.log(this.userInfo.avatar);
                this.$forceUpdate();
            });
        } catch (error) {
            console.log(error);
            this.$toast(error);
        }
        },
           // 修改信息
        getuser(){
            let {avatar,nickname,sex,birthday}=this.userInfo
            this.uid=localStorage.getItem('uid')
            this.$http.post('/user/editUserInfo',{
                avatar ,
                nickname,
                sex,
                birthday,
                uid:this.uid
            })
            .then(res=>{
               console.log(res);
               this.$toast.success(res.msg)
               this.$router.go(-1)
               localStorage.setItem('userInfo',JSON.stringify(this.$root.userInfo))
            })
        },
    },
    
};
</script>

<style lang="scss" scoped>
.sex{
line-height: 50px;
}
.btn {
  background: #2196f3;
  border: none;
  border-radius: 0;
  width: 300px;
  margin-left: 27px;
  margin-top: 10px;
}
ul {
    padding:0 0 0 15px;
    li{
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
    }
    
}
// 头像
.dataLists > div {
    position: relative;
    font-size: 17px;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border-bottom: 1px solid #ccc;

    &::after {
      display: block;
      position: absolute;
      bottom: 0;
      left: 15px;
      right: 15px;
      background: #ccc;
      height: 1px;
      content: "";
    }

    .iconfont {
      font-size: 38px;
    }
    span {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);

      color: rgb(222, 222, 222);
    }
    input {
      width: 220px;
      text-align: right;
      color: #333;
      line-height: 36px;
      height: 36px;
    }
    input::placeholder {
      color: #aaa;
    }
    .type {
      width: 150px;
      overflow: auto;
      display: inline-block;
      white-space: nowrap;
      text-align: right;
    }
  }
   .img{
        float: right;
        padding-right: 21px;
        padding-left: 13px;
        margin-top: 6px;
        span{
            float: left;
            display: inline-block;
            padding-right: 249px;
        }
    }
    button{
        width: 90%;
        text-align: center;
        height: 40px;
        line-height: 40px;
        margin: 0 19px;
        margin-top: 30px;
        background-color: rgb(55, 165, 244);
        border: none;
        border-radius: 16px;
    }
</style>